<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <keep-alive :max="10">
        <component :is="coms[currentIndex]"/>
      </keep-alive>
    </transition>

    <div class="tabbar">
      <span @click="currentIndex=index" :class="{active:currentIndex == index}" v-for="(item,index) in btns" :key="index">{{item}}</span>
    </div>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Tuan from './components/Tuan.vue'
import Order from './components/Order.vue'
import Mine from './components/Mine.vue'
export default {
  components:{
    Home,
    Order,
    Mine
  },
  data(){
    return{
      currentIndex:0,
      btns:["首页","抱抱团","订单","我的"],
      coms:[Home,Tuan,Order,Mine]
    }
  }
}
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
.tabbar{
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #333;
  background-color: #fff;
}
.tabbar .active{
  color: cornflowerblue;
}

/* 入场动画 */
.fade-enter{
  transform: rotate(0deg);
}
.fade-enter-active{
  transition: all .5s;
}
.fade-enter-to{
  transform:  rotate(360deg);
}

/* 离场动画 */
.fade-leave{
  transform:  rotate(360deg);
}
.fade-leave-active{
  transition: all .5s;
}
.fade-leave-to{
  transform:  rotate(0deg);
}
</style>
